<template>
	<view>
		<!-- 修改头部图片容器 -->
		<view class="header-image-container">
			<image class="header-image" src="../../static/detail@2x.jpg" mode="widthFix"></image>
		</view>

		<view>
			<v-tabs v-model="activeTab" :scroll="false" :tabs="['场地信息', '设备详情']" @change="changeTab"
				lineHeight="6rpx"></v-tabs>
		</view>
		<view v-show="showStationInfo">
			<view class="detail-card">
				<view>
					<text class="title">{{stationInfo.stationName}}</text>
					<text class="station-address"> 运营中</text>
				</view>
				<view class="station-address">
					<view>地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址:&nbsp;&nbsp;{{stationInfo.address}}</view>
					<view class="list-box">
						<view>营业时间:&nbsp;&nbsp;8:00-18:00</view>
						<view>服务电话:&nbsp;&nbsp;010-88486655</view>
					</view>
					<view class="list-box">
						<view>场站类型:&nbsp;&nbsp;公共</view>
						<view>运营方式:&nbsp;&nbsp;自营</view>
					</view>
					<br>
					<view class="row station-address">
						<image class="distance-image" src="/static/detail-distance@2x.png"></image>
						1.2km
						<view class="vertical-gray-line"></view>

						<image class="fast-image" src="/static/detail-fast@2x.png"></image>
						10/20
						<view class="vertical-gray-line"></view>

						<image class="slow-image" src="/static/detail-slow@2x.png"></image>
						5/10
					</view>
				</view>
			</view>
			<!-- 修改营销活动为横向排列 -->
			<view class="detail-card station-address margin-top">
				<view class="row">
					<view class="vertical-blue-line"></view>
					<text class="title">促销活动</text>
				</view>
				<view class="promotion-container">
					<view class="promotion-item" v-for="(item,index) in promotions" :key="index">
						<image class="detail-money-image" src="/static/detail-money-icon.png"></image>
						<text class="money-text">{{item.amount}}</text>
						<text class="promotion-desc">{{item.desc}}</text>
					</view>
				</view>
			</view>

			<view class="detail-card station-address margin-top">
				<view class="row">
					<view class="vertical-blue-line"></view>
					<text class="title">收费说明</text>
				</view>
				电 费:&nbsp;&nbsp;1.01元/度<br>
				服 务 费:&nbsp;&nbsp;0.55元/度<br>
				停 车 费:&nbsp;&nbsp;免费停车2小时;首小时5元;第二小时白天2元/小时;晚上1元/小时;封顶30元。<br>
				支付方式:&nbsp;&nbsp;线上
			</view>
		</view>
		<view v-show="showDevice">
			<uni-card v-for="gunInfoVO in gunInfoVos">
				<view class="row device-view">
					<view>
						<image class="device-icon-image" src="/static/detail-device-icon@2x.png"></image>
						<br>
						<text>{{gunInfoVO.gunName}}</text>
					</view>
					<view class="device-vertical-gray-line"></view>
					<view>
						<view class="row">
							<view v-if="gunInfoVO.gunStatus==1" class="idle-view center">空闲</view>
							<view v-if="gunInfoVO.gunStatus==2" class="use-view center">使用中</view>
							<view v-if="gunInfoVO.gunStatus==3" class="use-view center">故障</view>
						</view>
						<view>
							<view v-if="gunInfoVO.gunType==1">慢充 功率{{gunInfoVO.electricity}}KW</view>
							<view v-if="gunInfoVO.gunType==2">快充 功率{{gunInfoVO.electricity}}KW</view>
						</view>
					</view>
					<view>
						<view v-if="gunInfoVO.gunStatus==1" class="go-charging-idle-view center" @click="toScanGun">去充电
						</view>
						<view v-else class="go-charging-use-view center">去充电</view>
					</view>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 0,
				showStationInfo: true,
				showDevice: false,
				stationInfo: {},
				gunInfoVos: [],
				promotions: [{
						amount: "20",
						desc: "充2000\n限部分场站"
					},
					{
						amount: "50",
						desc: "充5000\n限部分场站"
					}
				]
			};
		},
		onLoad(options) {
			let id = options.id;
			this.getStation(id);
		},
		methods: {
			getStation(stationId) {
				uni.request({
					url: this.$baseUrl + "/device_api/device/station/detail/" + stationId,
					method: 'GET',
					success: (res) => {
						this.stationInfo = res.data.data;
						this.gunInfoVos = this.stationInfo.gunInfoVos;
					}
				});
			},
			changeTab(index) {
				if (index == 0) {
					this.showStationInfo = true;
					this.showDevice = false;
				} else {
					this.showDevice = true;
					this.showStationInfo = false;
				}
			},
			toScanGun() {
				console.log("点击去充电触发");
				uni.switchTab({
					url: "/pages/scanCharging/scanCharging"
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f5f7fa;
	}

	.header-image-container {
		width: 100%;
		height: 280rpx;
		overflow: hidden;
		position: relative;

		.header-image {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}
	}

	.promotion-container {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;

		.promotion-item {
			width: 48%;
			height: 180rpx;
			border: 2rpx solid #0091ff;
			border-radius: 12rpx;
			padding: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.detail-money-image {
				width: 32rpx;
				height: 32rpx;
				margin-bottom: 10rpx;
			}

			.money-text {
				font-size: 48rpx;
				color: #0091ff;
				font-weight: bold;
				margin: 10rpx 0;
				line-height: 1;
			}

			.promotion-desc {
				font-size: 24rpx;
				color: #666;
				text-align: center;
				white-space: pre-line;
			}
		}
	}

	.detail-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		margin: 24rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			margin-right: 16rpx;
		}

		.station-address {
			font-size: 28rpx;
			color: #666;
			line-height: 1.6;
		}
	}

	.station-address:first-child {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;

		>text:last-child {
			background: #e8f5ff;
			color: #0091ff;
			font-size: 24rpx;
			padding: 4rpx 16rpx;
			border-radius: 20rpx;
		}
	}

	.list-box {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -16rpx;

		>view {
			flex: 0 0 50%;
			box-sizing: border-box;
			padding: 0 16rpx;
			margin-bottom: 16rpx;
		}
	}

	.row.station-address {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 24rpx;
		padding-top: 24rpx;
		border-top: 1rpx solid #eee;

		>image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 12rpx;
		}

		>text {
			font-size: 28rpx;
			color: #333;
		}

		.vertical-gray-line {
			width: 1rpx;
			height: 32rpx;
			background-color: #ddd;
			margin: 0 24rpx;
		}
	}

	.vertical-blue-line {
		width: 8rpx;
		height: 36rpx;
		background-color: #0091ff;
		border-radius: 4rpx;
		margin-right: 16rpx;
	}

	.active-content-view {
		width: 48%;
		height: 160rpx;
		border: 2rpx solid #0091ff;
		border-radius: 12rpx;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;

		&.active-content-view-space {
			margin-right: 4%;
		}

		.detail-money-image {
			width: 32rpx;
			height: 32rpx;
		}

		.money-text {
			font-size: 64rpx;
			color: #0091ff;
			margin: 0 12rpx;
			line-height: 1;
		}

		.active-detail-view {
			font-size: 24rpx;
			color: #666;
			line-height: 1.4;
		}
	}

	.device-view {
		display: flex;
		align-items: center;
		padding: 24rpx 0;

		>view:first-child {
			display: flex;
			flex-direction: column;
			align-items: center;
			min-width: 140rpx;

			.device-icon-image {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 12rpx;
			}

			>text {
				font-size: 26rpx;
				color: #333;
				text-align: center;
			}
		}

		.device-vertical-gray-line {
			width: 1rpx;
			height: 80rpx;
			background-color: #eee;
			margin: 0 24rpx;
		}

		>view:nth-child(3) {
			flex: 1;

			>view:first-child {
				margin-bottom: 12rpx;
			}

			.idle-view,
			.use-view {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				height: 48rpx;
				width: 96rpx;
				border-radius: 24rpx;
				font-size: 24rpx;
				margin-right: 24rpx;
			}

			.idle-view {
				background-color: #e8f5ff;
				color: #0091ff;
			}

			.use-view {
				background-color: #fff1e0;
				color: #ff9830;
			}
		}

		>view:last-child {
			margin-left: 24rpx;

			.go-charging-idle-view,
			.go-charging-use-view {
				height: 72rpx;
				width: 160rpx;
				border-radius: 36rpx;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.go-charging-idle-view {
				background-color: #0091ff;
				color: #fff;
			}

			.go-charging-use-view {
				background-color: #f5f5f5 !important;
				color: #ccc !important;
			}
		}
	}

	.margin-top {
		margin-top: 24rpx;
	}

	.detail-card>view:last-child {
		font-size: 28rpx;
		color: #666;
		line-height: 1.8;
	}
</style>